﻿<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ui="using:Okra.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d">

    <!-- SettingsChrome -->

    <Style x:Key="SettingsBackButtonStyle" TargetType="Button">
        <Setter Property="MinWidth" Value="0"/>
        <Setter Property="Margin" Value="41,0,7,13"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
        <Setter Property="FontWeight" Value="ExtraLight"/>
        <Setter Property="FontSize" Value="26.66667"/>
        <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
        <Setter Property="AutomationProperties.Name" Value="Back"/>
        <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="RootGrid" Width="36" Height="36">
                        <Grid Margin="-1,-1,0,0">
                            <TextBlock x:Name="BackgroundGlyph" Text="&#xE0D4;" Foreground="Transparent"/>
                            <TextBlock x:Name="OutlineGlyph" Text="&#xE0BB;"/>
                            <TextBlock x:Name="ArrowGlyph" Text="&#xE0C4;" FontSize="24" Margin="2,2,0,0"/>
                        </Grid>
                        <Rectangle
                            x:Name="FocusVisualWhite"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="1.5"/>
                        <Rectangle
                            x:Name="FocusVisualBlack"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="0.5"/>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0.25"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation
                                            Storyboard.TargetName="OutlineGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0"
                                            Duration="0"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground)" Storyboard.TargetName="ArrowGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation
                            				Storyboard.TargetName="FocusVisualWhite"
                            				Storyboard.TargetProperty="Opacity"
                            				To="1"
                            				Duration="0"/>
                                        <DoubleAnimation
                            				Storyboard.TargetName="FocusVisualBlack"
                            				Storyboard.TargetProperty="Opacity"
                            				To="1"
                            				Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SettingsHeaderTextStyle" TargetType="TextBlock">
        <Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}"/>
        <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
        <Setter Property="TextTrimming" Value="WordEllipsis"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Typography.StylisticSet20" Value="True"/>
        <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
        <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
        <Setter Property="FontSize" Value="26.667"/>
        <Setter Property="FontWeight" Value="Light"/>
        <Setter Property="LineHeight" Value="30"/>
        <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
        <Setter Property="CharacterSpacing" Value="20"/>
        <!-- Properly align text along its baseline -->
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TranslateTransform X="-1" Y="4"/>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="ui:SettingsChrome">
        <Setter Property="MinWidth" Value="346"/>
        <Setter Property="Background" Value="{StaticResource ApplicationPageBackgroundThemeBrush}"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ui:SettingsChrome">
                    <Border d:DesignHeight="600" d:DesignWidth="346"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding HeaderBackgroundBrush}"
                        BorderThickness="1,0,0,0">
                        <Border BorderThickness="1,0,0,0" Margin="-1,0,0,0" BorderBrush="#33000000">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="80"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Grid Background="{TemplateBinding HeaderBackgroundBrush}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Button Style="{StaticResource SettingsBackButtonStyle}" Background="{TemplateBinding HeaderBackgroundBrush}" Foreground="{TemplateBinding HeaderForegroundBrush}" Margin="38,0,7,13" Command="{TemplateBinding BackButtonCommand}"/>
                                    <TextBlock Grid.Column="1" Text="{TemplateBinding Title}" Margin="0,20,0,18" VerticalAlignment="Bottom" Foreground="{TemplateBinding HeaderForegroundBrush}" Style="{StaticResource SettingsHeaderTextStyle}"/>
                                    <Image Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Bottom" Stretch="None" Margin="5,0,40,15.6" Width="30" Height="30" Source="{TemplateBinding Logo}"/>
                                </Grid>
                                <Grid Grid.Row="1">
                                    <Grid.Transitions>
                                        <TransitionCollection>
                                            <EntranceThemeTransition FromHorizontalOffset="100"/>
                                        </TransitionCollection>
                                    </Grid.Transitions>
                                    <ContentPresenter/>
                                </Grid>
                            </Grid>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
